<template>
  <div v-if="iswhOK"  :style="{ width: backgroundWidth + 'px',height:backgroundHeight+'px' }">
    <div v-if="!isInitUserInfo || !isInitReportInfo">信息获取中，请稍后</div>
    <MainContainer v-if="isInitUserInfo&&isInitReportInfo"/>
  </div>
</template>

<script setup>

import MainContainer from '@/components/Main/MainContainer.vue';
import {onBeforeUnmount, onMounted, ref, watchEffect} from 'vue';
import axios from 'axios';
import setting from '@/setting.js';
import {ElMessage} from "element-plus";
import {jsonApi} from "@/global.js";

const isInitUserInfo = ref(false);
const isInitReportInfo= ref(false);
const backgroundWidth = ref(0);
const backgroundHeight = ref(0);
const iswhOK = ref(false);
const reportInfoReady = ref(false); // 新增状态变量
onMounted(() => {
  updateHeaderWidth();
  checkTokenAndRedirect();
  window.addEventListener('resize', updateHeaderWidth);
});
// 组件卸载前执行的操作
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateHeaderWidth);
});
// 方法定义
function updateHeaderWidth() {
  // 确保this.$refs.header已经存在
      backgroundHeight.value=window.innerHeight;
      backgroundWidth.value=backgroundHeight.value*(16/9);
      if(backgroundWidth.value<window.innerWidth-10){
        backgroundWidth.value = window.innerWidth;
        backgroundHeight.value=backgroundWidth.value*(9/16);
      }
      iswhOK.value=true;
}
const getreportinfo= async () => {
  try {
    const response = await jsonApi('/reportmanager/getmodelinfo/');
    if (response.status === 200) {
      const data = await response.json();
      console.log(data);
      localStorage.setItem('reportinfo', JSON.stringify(data));
      isInitReportInfo.value = true; // 数据获取成功后，设置为true
    } else {
      ElMessage(
          {
            message: '获取报备信息失败',
            type: 'error',
            duration: 2000
          }
      )
    }
  } catch (error) {
    ElMessage(
          {
            message: '获取报备信息失败：'+error,
            type: 'error',
            duration: 2000
          }
      )
  }
};
const getUserInfo=async ()=>{
/*
* /user/info/ post
* fetch
* */
  try {

    const response = await jsonApi('/user/info/');
    const data = await response.json();
    if (response.ok) {
      localStorage.setItem('userinfo', JSON.stringify(data));
      isInitUserInfo.value = true;
    } else {
      ElMessage({
        message: '获取用户信息失败:' + data.detail,
        type: 'error'
      })
    }
  } catch (e) {
    ElMessage({
      message: '获取用户信息失败:' + e,
      type: 'error'
    })
  }


}
const checkTokenAndRedirect = () => {
  const token = localStorage.getItem('access_token');
  if (!token) {
    alert('请先登录！');
    setTimeout(() => {
      // 假设您使用的是Vue Router，这里应该是导航到登录页面的逻辑
      // 如果您已配置Vue Router，可以使用`router.push`方法
      // 但请注意，直接使用`window.location.href`也可以实现跳转
      window.location.href = '/';
    }, 2000);
  } else {
    //获取报备模型信息
    getreportinfo();
    //获取用户信息
    getUserInfo();
  }
};

</script>

<style scoped>
.login-alert {
  /* 添加一些样式以适应您的UI设计 */
  text-align: center;
  margin-top: 50px;
  font-size: 18px;
}
</style>